<template>
  <div>
    <chart :options="options" :height="250" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
const color = ['#00DAFF', '#054E9D', '#054E9D', '#054E9D', '#054E9D', '#054E9D', '#054E9D', '#054E9D', '#054E9D', '#054E9D', '#054E9D', '#054E9D']
function getChartOptions (data) {
  const seriesData = {}
  Object.values(data).forEach((item) => {
    for (var key in item) {
      if (seriesData[key]) {
        seriesData[key].push(item[key])
      } else {
        seriesData[key] = [item[key]]
      }
    }
  })
  console.log(seriesData, 'seriesData')
  const options = {
    grid: {
      top: '20%',
      bottom: '10%',
      left: 0,
      right: 0
    },
    legend: {
      show: true,
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 10,
      data: Object.keys(seriesData).map((item, index) => {
        return {
          name: item,
          icon: 'circle',
          textStyle: {
            color: color[index]
          }
        }
      })
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0
        },
        lineStyle: {
          width: 0
        }
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#5c6c7c'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: Object.keys(data),
        axisLine: {
          lineStyle: {
            color: '#1FC6FF'
          }
        },
        axisTick: {
          show: true
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#FFFFFF'
          },
          // 默认x轴字体大小
          fontSize: 12
          // margin:文字到x轴的距离
        },
        boundaryGap: false,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#1FC6FF'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          show: true
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#1FC6FF'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#FFFFFF'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#1FC6FF'
          }
        }
      },
      {
        type: 'value',
        position: 'right',
        axisTick: {
          show: true
        },
        axisLabel: {
          textStyle: {
            color: '#1FC6FF'
          },
          formatter: '{value}'
        },
        splitLine: {
          show: true
        }
      }
    ],
    series: Object.values(seriesData).map((item, index) => {
      return {
        name: Object.keys(seriesData)[index],
        type: 'line',
        data: item,
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: '#00DAFF'
        },
        itemStyle: {
          normal: {
            color: '#00DAFF',
            borderColor: '#00DAFF'
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: color[index]
                },
                {
                  offset: 1,
                  color: 'rgba(0,0,0,0)'
                }
              ],
              false
            )
          }
        }
      }
    })
  }
  return options
}
export default {
  name: 'history-result',
  props: ['student'],
  data () {
    return {
      options: {}
    }
  },
  watch: {
    student () {
      this.initData()
    }
  },
  mounted () {
    setTimeout(() => {
      this.initData()
    }, 500)
  },
  methods: {
    initData () {
      const data = this.$db.select('achievement')
      data.onsuccess = (res) => {
        // let count = 1
        const scoreData = res.target.result.reduce((prev, item, index) => {
          if (item.student === this.student) {
            console.log(item.student, item.score, '233')
            prev[item.create_time] = { ...item.score }
          }
          return prev
        }, {})
        console.log(scoreData, '折现')
        // let data1 = {}
        // let data2 = []
        // for (const key in scoreData) {
        //   const value = scoreData[key].score
        //   for (const subject in value) {
        //     value[subject] = value[subject] / count
        //   }
        //   data2.push({
        //     text: key,
        //     score: value
        //   })
        //   if (key === this.student) {
        //     data1 = value
        //   }
        // }
        // data2 = data2.reduce((prev, item, index) => {
        //   if (Object.keys(prev).length < 1) {
        //     prev = { ...item.score }
        //   } else {
        //     const score = item.score
        //     for (const key in score) {
        //       prev[key] += score[key]
        //       if (index === data2.length - 1) {
        //         prev[key] = prev[key] / Object.keys(scoreData).length
        //       }
        //     }
        //   }
        //   return prev
        // }, {})
        this.options = getChartOptions(scoreData)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
